<template>

    <button @click="state.count++">{{ state.count }}</button>
    <button @click="count++">{{ count }}</button>
</template>

<script setup>
import { reactive, ref } from 'vue';

//     一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性：
const count = ref(0)
const state = reactive({
    count
})
console.log(state.count)
state.count = 1
console.log(count.value)


// 如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：
const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1


// 只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
</script>

<style></style>